<template>
    <div>
        <app-header></app-header>
        <div class="box">
            <ul>
                <router-link
                    v-for="item in list"
                    :key="item.id"
                    tag="li"
                    @click.native="go(item.id)"
                    :to="item.path"
                    active-class="active"
                    >{{ item.name }}</router-link
                >
            </ul>
            <div id="content">
                <!-- 设置二级路由的出口 -->

                <router-view></router-view>
                <!-- <router-view /> -->
                <div class="height"></div>
            </div>
        </div>
    </div>
</template>

<script>
import appHeader from "../components/header";
import goodsApi from "../api/goodsApi";
import { Lazyload } from "vant";
export default {
    data() {
        return {
            activeClass: "",
            list: [
                {
                    id: 1,
                    name: "运动生活",
                    path: "/list/1"
                },
                {
                    id: 2,
                    name: "休闲时尚",
                    path: "/list/2"
                },
                {
                    id: 3,
                    name: "时尚鞋品",
                    path: "/list/3"
                },
                {
                    id: 4,
                    name: "快乐儿童",
                    path: "/list/4"
                }
            ]
        };
    },

    components: {
        appHeader
    },

    methods: {
        getdata(obj) {
            //
        },

        go(val) {
            //在点击的时候发起请求顺带存进本地储存中，给Classify.vue直接拿数据渲染
            goodsApi
                .getGoods({ category: `${val}` })
                .then(res => {
                    //console.log(res.data);
                    localStorage.setItem(
                        "classify",
                        JSON.stringify(res.data.data)
                    );
                })
                .catch(err => {
                    console.log(err);
                });
            //         this.$router.push({
            //           path:"/classfity",

            // 　　　　 query:{id：item.id}
        }
    }
    // created() {
    //   goodsApi
    //     .getGoods({ category: `1` })
    //     .then(res => {
    //       console.log(res.data);
    //       localStorage.setItem("classify", JSON.stringify(res.data.data));
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // }

    // watch: {
    //   $route: {
    //     deep: true,
    //     handler(val) {
    //       console.log(val);
    //     }
    //   }
    // }
};
</script>

<style scoped lang="scss">
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
header {
    display: flex;
    justify-content: space-between;
    background-color: #f5f5f5;

    .headerback img {
        width: vw(40);
        height: vw(50);
    }

    .indexsearch {
        width: vw(286);
        height: vw(50);
        // background-color: orange;
        text-align: center;
        line-height: vw(50);
    }
    .index img {
        width: vw(46);
        height: vw(50);
    }
}
ul {
    width: vw(138);
    height: vw(1265);
    background: #ccc;
    position: fixed;
    left: 0;
    top: vw(100);
    float: left;
    li {
        list-style: none;
        font-size: vw(24);
        height: vw(100);
        line-height: vw(100);
        text-align: center;
        border-right: vw(1);
    }
    .active {
        color: red;
        font-size: vw(28);
    }
}
#content {
    width: vw(570);
    float: right;
    height: 100vh;
    // background: pink;
}
.height {
    height: vw(100);
}
</style>
